import Vue from "vue";
import { Component } from "vue-property-decorator";
import { getRect } from "../function";

@Component
export default class extends Vue {
  capsuleButtonNum: number = 0;
  isNav: boolean = false;
  titleReactBottom: number = 0;
  scrollNum = 0;
  capsuleColor = "base";
  titleClass = "";

  onPageScroll(e) {
    this.scrollNum = e.scrollTop;
    this.setIsFixed();
  }
  onReady() {
    this.$nextTick(() => {
      this.getTiltRect();
    });
  }
  getTiltRect() {
    getRect(this, this.titleClass).then((e) => {
      this.titleReactBottom = e.top;
      this.setIsFixed();
    });
  }

  setIsFixed() {
    const end = this.titleReactBottom - this.capsuleButtonNum;
    if (this.scrollNum >= (end >= 0 ? end : 0)) {
      this.isNav = true;
      this.capsuleColor = "white";
    } else {
      this.isNav = false;
      this.capsuleColor = "base";
    }
  }
}
